import cls from './HeaderMobile.module.scss'
import { AppLink } from 'shared/UI/AppLink/AppLink'
import BurgerMenuToggler from 'shared/assets/IoMenu.svg'
import Logo from 'shared/assets/IoCompass.svg'
import AccountIcon from 'shared/assets/IoPerson.svg'
import { useTranslation } from 'react-i18next'
import { Button, ButtonTheme } from 'shared/UI/Button/Button'

interface HeaderMobileProps {
    className?: string
    navigationStateSetter: () => void
}

export default ({ className, navigationStateSetter }: HeaderMobileProps) => {
    const { t } = useTranslation('header')
    return (
        <>
            <div className={cls.mainlink}>
                <AppLink to="/">
                    <Logo className={cls.icon} />
                    <h2>{t('service_name')}</h2>
                </AppLink>
            </div>
            <div className={cls.menus}>
                <Button
                    theme={ButtonTheme.CLEAR}
                    className={cls.icon}
                    onClick={navigationStateSetter}
                    data-testid="sidebar-toggler"
                >
                    <BurgerMenuToggler />
                </Button>
                <Button
                    theme={ButtonTheme.CLEAR}
                    className={cls.icon}
                >
                    <AccountIcon />
                </Button>
            </div>
        </>
    )
}
